<template>
  <el-dialog :title="'详细设置'" :close-on-click-modal="false" :visible.sync="visible" class="hotel-room">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="房型详情" name="first">
        <first ref="first"></first>
      </el-tab-pane>
      <el-tab-pane label="设备服务" name="second">
        <second ref="second"></second>
      </el-tab-pane>
      <el-tab-pane label="房型图片" name="third">
        <third ref="third"></third>
      </el-tab-pane>
    </el-tabs>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{ $t('Common.Cancel') }}</el-button>
    </span>

  </el-dialog>
</template>

<script>
  import first from './data/first.vue'
  import second from './data/second.vue'
  import third from './data/third.vue'
  export default {
    data() {
      return {
        visible: false,
        activeName: 'first',
        id: '',
      };
    },
    components: {
      first,
      second,
      third,
    },
    methods: {
      handleClick(tab, event) {
        var index = tab.index
        if (index == 0) {
          this.$nextTick(() => {
            this.$refs.first.init(this.id)
          })
        }
        if (index == 1) {
          this.$nextTick(() => {
            this.$refs.second.init(this.id)
          })
        }
        if (index == 2) {
          this.$nextTick(() => {
            this.$refs.third.init(this.id)
          })
        }
        console.log(tab, event);
      },
      init(id) {
        this.visible = true;
        this.id = id;
        this.$nextTick(() => {
          this.$refs.first.init(id)
        })
      },
    }
  };
</script>

<style lang="less" scoped>

</style>
